// @ts-nocheck
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React, { Component, Fragment } from 'react';

import { List, Modal, Form, Input } from 'antd';

const FormItem = Form.Item;

type Unpacked<T> = T extends (infer U)[] ? U : T;

const passwordStrength = {
  strong: (
    <span className="strong">
      <FormattedMessage id="accountandsettings.security.strong" defaultMessage="Strong" />
    </span>
  ),
  // medium: (
  //   <span className="medium">
  //     <FormattedMessage id="accountandsettings.security.medium" defaultMessage="Medium" />
  //   </span>
  // ),
  // weak: (
  //   <span className="weak">
  //     <FormattedMessage id="accountandsettings.security.weak" defaultMessage="Weak" />
  //     Weak
  //   </span>
  // ),
};

@Form.create()
class SecurityView extends Component {
  constructor(props: any) {
    super(props);
    this.state = {
      passwordModalVisible: false,
    }
  }

  getData = () => [
    {
      title: formatMessage({ id: 'accountandsettings.security.password' }, {}),
      description: (
        <Fragment>
          {formatMessage({ id: 'accountandsettings.security.password-description' })}：
          {passwordStrength.strong}
        </Fragment>
      ),
      actions: [
        <a key="Modify" onClick={() => {
          this.setState({
            passwordModalVisible: true
          })
        }}>
          <FormattedMessage id="accountandsettings.security.modify" defaultMessage="Modify" />
        </a>,
      ],
    },
    // {
    //   title: formatMessage({ id: 'accountandsettings.security.phone' }, {}),
    //   description: `${formatMessage(
    //     { id: 'accountandsettings.security.phone-description' },
    //     {},
    //   )}：138****8293`,
    //   actions: [
    //     <a key="Modify">
    //       <FormattedMessage id="accountandsettings.security.modify" defaultMessage="Modify" />
    //     </a>,
    //   ],
    // },
    // {
    //   title: formatMessage({ id: 'accountandsettings.security.question' }, {}),
    //   description: formatMessage({ id: 'accountandsettings.security.question-description' }, {}),
    //   actions: [
    //     <a key="Set">
    //       <FormattedMessage id="accountandsettings.security.set" defaultMessage="Set" />
    //     </a>,
    //   ],
    // },
    // {
    //   title: formatMessage({ id: 'accountandsettings.security.email' }, {}),
    //   description: `${formatMessage(
    //     { id: 'accountandsettings.security.email-description' },
    //     {},
    //   )}：ant***sign.com`,
    //   actions: [
    //     <a key="Modify">
    //       <FormattedMessage id="accountandsettings.security.modify" defaultMessage="Modify" />
    //     </a>,
    //   ],
    // },
    // {
    //   title: formatMessage({ id: 'accountandsettings.security.mfa' }, {}),
    //   description: formatMessage({ id: 'accountandsettings.security.mfa-description' }, {}),
    //   actions: [
    //     <a key="bind">
    //       <FormattedMessage id="accountandsettings.security.bind" defaultMessage="Bind" />
    //     </a>,
    //   ],
    // },
  ];

  handleChangePwd = () => {
    const { handleUpdatePwd, form } = this.props;
    let params = {};
    form.validateFields( async (err, values) => {
      if (err) return;
      params = {
        oldPassword: values.oldPassword,
        newPassword: values.password,
        confirmPassword: values.confirmPassword,
      }
      let status = await handleUpdatePwd(params);
      if(status){
        this.setState({
          passwordModalVisible: false
        })
      }
    });
  }

  checkConfirm = (rule, value, callback) => {
    const { form } = this.props;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入的密码不一致!');
    } else {
      callback();
    }
  };

  render() {
    const data = this.getData();
    const { passwordModalVisible } = this.state; 
    const { form } = this.props;
    return (
      <Fragment>
        <List<Unpacked<typeof data>>
          itemLayout="horizontal"
          dataSource={data}
          renderItem={item => (
            <List.Item actions={item.actions}>
              <List.Item.Meta title={item.title} description={item.description} />
            </List.Item>
          )}
        />
        {passwordModalVisible && (
          <Modal
            destroyOnClose
            title="修改账户密码"
            width="40%"
            visible={passwordModalVisible}
            onOk={() => this.handleChangePwd()}
            onCancel={() => {
              this.setState({
                passwordModalVisible: false
              })
            }}
          >
            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="原密码">
              {form.getFieldDecorator('oldPassword', {
                rules: [
                  {required: true, message: '原密码不能为空！'},
                  {validator: this.checkPassword},
                ],
              })(<Input placeholder="" />)}
            </FormItem>
    
            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="新密码">
              {form.getFieldDecorator('password', {
                rules: [
                  {pattern: /^[a-zA-Z0-9]{6,}$/, message: '新密码不能为空！'},
                  {validator: this.checkPassword},
                ],
              })(<Input placeholder="" />)}
            </FormItem>
    
            <FormItem labelCol={{span: 5}} wrapperCol={{span: 15}} label="确认新密码">
              {form.getFieldDecorator('confirmPassword', {
                rules: [
                  {
                    pattern: /^[a-zA-Z0-9]{6,}$/,
                    message: '请确认密码！',
                  },
                  {
                    validator: this.checkConfirm,
                  },
                ],
              })(<Input placeholder="" />)}
            </FormItem>
    
          </Modal>)
        }
      </Fragment>
    );
  }
}

export default SecurityView;
